<template>
  <div class="CommodityPage">
    <div class="section">
      <div class="carousel-item">
        <el-carousel :interval="4000" type="card" height="500px">
          <el-carousel-item v-for="item in carouselImgList" :key="item">
<!--            <h3 text="2xl" justify="center">{{ item }}</h3>-->
            <img :src="item.url" :alt="item.commodity">
          </el-carousel-item>
        </el-carousel>
      </div>

      <div class="content3">
        <div class="text" style="text-align: center;">
          <p class="sub" style="color: black; margin-top: 3vh; margin-bottom: 3vh;">您的不二之选</p>
        </div>

        <div class="commodities" style="display: flex; justify-content: center; width: 1200px; margin: 0 auto;">
          <el-container style="width: 400px" :class="{ 'highlighted': activeProduct === '青叶' }" @mouseover="activeProduct = '青叶'" @mouseleave="activeProduct = ''">
            <div class="commodity">
              <div style="display: flex" @click="redirectToProductPage('青叶')">
                <el-image :src="require('@/assets/images/青叶img.png')" alt="青叶" style="width: 400px; height: auto;"/>
              </div>
              <div class="commodity-intro">
                <span style="padding-top: 1vh;padding-left: 3vh">青叶</span>
                <el-button type="success" round style="margin-top: 0.8vh">选购商品</el-button>
              </div>
            </div>
          </el-container>
          <el-container style="width: 400px" :class="{ 'highlighted': activeProduct === '樱花' }" @mouseover="activeProduct = '樱花'" @mouseleave="activeProduct = ''">
            <div class="commodity">
              <div style="display: flex" @click="redirectToProductPage('樱花')">
                <el-image :src="require('@/assets/images/樱花img.jpg')" alt="樱花" style="width: 400px; height: auto;"/>
              </div>
              <div class="commodity-intro">
                <span style="padding-top: 1vh;padding-left: 3vh">樱花</span>
                <el-button type="success" round style="margin-top: 0.8vh">选购商品</el-button>
              </div>
            </div>
          </el-container>
          <el-container style="width: 400px" :class="{ 'highlighted': activeProduct === '青竹' }" @mouseover="activeProduct = '青竹'" @mouseleave="activeProduct = ''">
            <div class="commodity">
              <div style="display: flex" @click="redirectToProductPage('青竹')">
                <el-image :src="require('@/assets/images/青竹img.png')" :fit="fill" alt="青竹" style="width: 400px; height: auto;"/>
              </div>
              <div class="commodity-intro">
                <span style="padding-top: 1vh;padding-left: 3vh">青竹</span>
                <el-button type="success" round style="margin-top: 0.8vh">选购商品</el-button>
              </div>
            </div>
          </el-container>
        </div>
      </div>

      <div class="block text-center" m="t-4">
        <span class="demonstration">运用工艺</span>
        <el-carousel trigger="click" height="63vh">
          <el-carousel-item v-for="item in carouselImgList2" :key="item">
<!--            <h3 class="small justify-center" text="2xl">{{ item }}</h3>-->
            <img :src="item.url" :alt="item.img" style="width: 100%;height: auto">
          </el-carousel-item>
        </el-carousel>
        <span class="end-txt">若您有其他需要，随时联系我们。我们将尽力满足您的要求</span>
      </div>

    </div>

  </div>

</template>

<script setup lang="ts">
import bus from '../bus';
import router from '../router/router'

let activeProduct=''

const redirectToProductPage = (commodity: string) => {
  console.log(commodity)
  bus.emit('choseCommodity',commodity)
  router.push({ name: 'CommodityInfo', params: { commodity: commodity } });
}

const carouselImgList =[
  {commodity:'青叶',url:require('@/assets/images/青叶轮播.png')},
  {commodity:'樱花',url:require('@/assets/images/樱花轮播.png')},
  {commodity:'青竹',url:require('@/assets/images/青竹轮播.png')},
]

const carouselImgList2 =[
  {img:'1',url:require('@/assets/images/carousel1.jpg')},
  {img:'2',url:require('@/assets/images/carousel2.jpg')},
  {img:'3',url:require('@/assets/images/carousel3.jpg')},
  {img:'3',url:require('@/assets/images/carousel4.jpg')},
]

</script>

<style scoped>
.CommodityPage{
  display: flex;
  flex-direction: column;
  position: center;
}

.section {
  /*height: 100vh;*/
  display: flex;
  align-items: center;
  flex-direction: column;/*排版方式为竖直排版*/
  justify-content: center;
  background-size: cover;
  background-position: center;
  color: black;
  text-align: center;
  /* font-size: 24px; */
  font-weight: bold;
  width: 100%;
  position: relative;
  font-family: '岩田仿宋', serif;
}

.carousel-item{
  width: 100%;
  margin-top: 20px;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.content3{
  width: 100%;
}

.text {
  margin-bottom: 3px;
  text-align: center;
}

.text .sub {
  font-size: 2.5vw;
}

.commodities{
  display: flex;
  justify-content: center;
  width: 100%;
}

.commodity{
  border-radius: 5px;
  text-align: left;
  margin: 0 10px;
  flex: 1;
  background-color: rgba(203, 217, 250, 0.4);
  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  width: 100%;
}

.commodity-intro{
  font-size: 2vw;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
}

.block{
  margin-top: 5vh;
  width: 80%;
}

.demonstration {
  font-size: 2.5vw;
}

.end-txt{
  font-size: 2vw;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>